import { t } from 'i18next'
import React, { FC, useEffect, useState } from 'react'
import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Button } from '@kedacom/react-next'
import { RightWrap, ListItemGhost } from '../../components'
import { ListEmpty, ListTop, ListBody, ListTopActionItem, ActionType } from '@/components/List'
import { ListItem, ListType } from './ListItem'
import { Droppable, Draggable, DragDropContextProvider } from '@/plugins/dnd'
import { Mt, revert_mt } from '@/api/manager/mt'
import { DropData } from '@/api/manager/type'
import { useVipStore } from './store'
import shallow from 'zustand/shallow'
import { useMccStore } from '../../store'
import { actionButtonsCancel } from '../../store.actionButton'
import { listOrderClick } from '@/utils/listSlice'
import { transVipList } from '@/api/manager/vip/translator'
interface RowRendererProps extends ListChildComponentProps {
	data: ListType[]
}
const rowRenderer = React.memo(({ data: list, index, style }: RowRendererProps) => {
	const rowData = list[index]
	const dataTransfer = () => {
		return {
			data: {
				mt: revert_mt(rowData.mcc),
				vip: {},
			},
			from: 'vip',
		}
	}
	return (
		<Draggable
			style={style}
			index={index}
			dataTransfer={dataTransfer}
			ghostRender={<ListItemGhost data={rowData.mcc} />}
		>
			<ListItem {...rowData} />
		</Draggable>
	)
})
const Vip: FC = () => {
	const [list, setList] = useState<ListType[]>([])
	const { basicList, removeAllChecked, clear, save, drop, fetchInit, update } = useVipStore(
		(state) => ({
			basicList: state.showList,
			removeAllChecked: state.removeAllChecked,
			update: state.update,
			clear: state.clear,
			save: state.save,
			drop: state.drop,
			fetchInit: state.fetchInit,
		}),
		shallow
	)
	useEffect(() => {
		fetchInit()
	}, [])
	useEffect(() => {
		let list: ListType[] = basicList.map((l, i) => ({
			...l,
			number: i + 1 < 10 ? `0${i + 1}` : `${i + 1}`,
		}))
		setList(list)
	}, [basicList])
	const topActions: ListTopActionItem[] = [
		{
			text: t('删除'),
			onClick: () => {
				removeAllChecked()
			},
		},
		{
			text: t('清空'),
			onClick: () => {
				clear()
			},
		},
	]
	const handleOrder = (type: ActionType) => {
		const result = listOrderClick(basicList, type)
		update({ showList: result })
	}
	const handleBack = () => {
		useMccStore.getState().setCurPage('mcc_main')
		actionButtonsCancel()
	}
	const handleSave = () => {
		save()
	}
	const handleDrop = (dataTransfer: DropData, index: number) => {
		if (dataTransfer && dataTransfer.data && dataTransfer.data.mt) {
			let mt = dataTransfer.data.mt
			//本级终端，且不是本级会议
			if (mt.conf_level === 2 && mt.mt_key !== '0.0.0.0_0' && mt.isMt) {
				drop({
					mts: transVipList([mt]),
					from: dataTransfer.from,
					dropIndex: index,
				})
			}
		}
	}
	return (
		<RightWrap
			title={t('VIP设置')}
			action={<Button onClick={handleSave}>{t('确认设置')}</Button>}
			onBack={handleBack}
		>
			<ListTop title={t('VIP列表')} num={list.length} actions={topActions} />
			<ListBody order={handleOrder} disabled={list.length === 0}>
				<AutoSizer>
					{({ height }) => (
						<DragDropContextProvider>
							<Droppable onDrop={handleDrop}>
								{(setDroppableRef) =>
									list.length > 0 ? (
										<List
											width={248}
											height={height}
											itemCount={list.length}
											itemSize={32}
											itemData={list}
											outerRef={setDroppableRef}
											itemKey={(index, data) => data[index].mtKey}
										>
											{rowRenderer}
										</List>
									) : (
										<ListEmpty width={248} height={height} outerRef={setDroppableRef} />
									)
								}
							</Droppable>
						</DragDropContextProvider>
					)}
				</AutoSizer>
			</ListBody>
		</RightWrap>
	)
}
export default Vip
